<template>
  <div class="shezhi">
    <div class="shezhi-bar">
      <div v-for="(SBitems,SBidx) in SelectBarItems" :key="SBitems.title">
        <select-bar :title="SBitems.title" v-if="clear">
          <select-bar-item
            v-for="(item, idx) in SBitems.items"
            :idx="idx"
            :key="item.name"
            :title="item.name"
            :clickStyle="item.style"
            :path="'/main/shezhi/' + item.type"
            @clearStyle="clearStyle(SelectBarItems,SBidx, $event)"
          ></select-bar-item>
        </select-bar>
        <!-- <el-divider></el-divider> -->
      </div>
    </div>
    <div style="width: 250px; height: 100%"></div>
    <div class="shezhi-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import SelectBar from "@/components/SelectBar/SelectBar";
import SelectBarItem from "@/components/SelectBar/SelectBarItem";
export default {
  components: {
    SelectBar,
    SelectBarItem,
  },
  mounted () {
    this.$store.commit('setTitle','设置')
    this.$store.commit('NavStyleClear','设置')
  },
  data() {
    return {
      clear: true,
      SelectBarItems: [
        {
          title: "通用设置",
          items: [
            {
              name: "个人信息",
              type: "ty-grxx",
              style: true,
            },
            {
              name: "通知公告",
              type: "ty-tzgg",
              style: false,
            },
          ],
        },
        {
          title: "团队设置",
          items: [
            {
              name: "企业信息",
              type: "td-qyxx",
              style: false,
            },
            {
              name: "客服管理",
              type: "td-kfgl",
              style: false,
            },
            {
              name: "分组管理",
              type: "td-fzgl",
              style: false,
            },
            {
              name: "角色管理",
              type: "td-jsgl",
              style: false,
            },
          ],
        },
        {
          title: "客服设置",
          items: [
            {
              name: "常用语",
              type: "kf-cyy",
              style: false,
            },
            {
              name: "自动回复",
              type: "kf-zdhf",
              style: false,
            },
            {
              name: "对话规则",
              type: "kf-dhgz",
              style: false,
            },
            {
              name: "分配规则",
              type: "kf-fpgz",
              style: false,
            },
            {
              name: "会话评价",
              type: "kf-hhpj",
              style: false,
            },
            {
              name: "客户信息",
              type: "kf-khxx",
              style: false,
            },
            {
              name: "客户标签",
              type: "kf-khbq",
              style: false,
            },
            {
              name: "黑名单",
              type: "kf-hmd",
              style: false,
            },
          ],
        },
        {
          title: "工单设置",
          items: [
            {
              name: "基础设置",
              type: "gd-sz",
              style: false,
            },
            {
              name: "工单分类",
              type: "gd-fl",
              style: false,
            },
          ],
        },
        {
          title: "全局设置",
          items: [
            {
              name: "操作日志",
              type: "qj-czrz",
              style: false,
            },
            {
              name: "消息通知",
              type: "qj-xxtz",
              style: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    clearStyle(items,idx ,ev) {
      this.clear = false;
      for (let i in items) {
          for(let j in items[i].items){
            items[i].items[j].style = false
          }
      }
      items[idx].items[ev].style = true;
      this.$nextTick(() => {
        this.clear = true;
      });
      console.log("gdan");
      console.log(ev);
    },
  },
};
</script>

<style>
.shezhi {
  width: 100%;
  height: 100%;
  /* background-color: #999999; */
  display: flex;
}

.shezhi-bar {
  width: 240px;
  height: 90%;
  position: fixed;
  overflow: auto;
}

.shezhi-bar::-webkit-scrollbar {
  display: none;
}

.shezhi-main {
  width: 100%;
  height: 100%;
  margin-left: 45px;
  /* background-color: #ffffff; */
}
</style>